<template>
	<view class="content">
		<!-- 背景图 -->
		<view class="shop-bg">
			<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width="750rpx" height="262rpx" mode="aspectFill">
				<view slot="error" style="font-size: 24rpx;background: #ddd;width: 750rpx;height: 262rpx;"></view>
			</u--image>
		</view>
		<view class="title">
			编辑店铺信息
		</view>
		<view class="form">
			<view class="form-item">
				<view class="label">
					门店名称
				</view>
				<u--input placeholder="请输入店铺名称" border="none"
					:placeholderStyle="{'color':'#ABABAB','font-size': '28rpx'}" v-model="form.shop_name"></u--input>
			</view>
			<view class="form-item">
				<view class="label">
					联系电话
				</view>
				<u--input type="number" :maxlength="11" placeholder="请输入联系电话" border="none"
					:placeholderStyle="{'color':'#ABABAB','font-size': '28rpx'}" v-model="form.phone"></u--input>
			</view>
			<view class="form-item">
				<view class="label">
					地址
				</view>
				<u--input placeholder="请输入店铺地址" border="none"
					:placeholderStyle="{'color':'#ABABAB','font-size': '28rpx'}" v-model="form.shop_address"></u--input>
			</view>
			<view class="form-item" @click="showStart = true,hideKeyboard()">
				<view class="label">
					开始营业
				</view>
				<u--input placeholder="请选择营业时间" border="none"
					:placeholderStyle="{'color':'#ABABAB','font-size': '28rpx'}" disabled disabledColor="#ffffff"
					v-model="form.business_times">
				</u--input>
			</view>
			<view class="form-item"  @click="showEnd=true,hideKeyboard()">
				<view class="label">
					结束营业
				</view>
				<u--input placeholder="请选择营业时间" border="none"
					:placeholderStyle="{'color':'#ABABAB','font-size': '28rpx'}" disabled disabledColor="#ffffff"
					v-model="form.endtime">
				</u--input>
			</view>
			<view class="form-item" style="border: none;">
				<view class="label">
					个性标签
				</view>
				<view class="tabs">
					<view class="tab" v-for="(item,index) in labels" :key="index">
						{{item}}
					</view>
					<view class="tab-add" @click="showCheckLabel">
						+添加自定义标签
					</view>
				</view>
			</view>
			<!--  -->
			<view class="form-item-title">
				添加门店照片
			</view>
			<view class="img-list">
				<view class="img-item" v-for="(item,index) in imageList" :key="index">
					<view class="img-box">
						<image :src="item | setImgUrl" style="width: 120rpx;height: 120rpx;" mode=""></image>
						<view class="del-btn" @click="delimg(index)">
							<u-icon name="close-circle" size="24" color="#e4393c"></u-icon>
						</view>
					</view>
				</view>
				<view class="img-add" @click="checkImg()">
					<u-icon name="plus" color="#ffffff" size="36"></u-icon>
					<text>点击上传</text>
				</view>
			</view>
		</view>
		<view class="submit-btn" @click="editshop()">
			提交
		</view>
		<!-- 标签选择器 -->
		<u-popup :show="show" @close="close">
			<view class="modal-header">
				<view class="modal-cancel" @click="close">
					取消
				</view>
				<view class="modal-submit" @click="define">
					确定
				</view>
			</view>
			<scroll-view class="modal-box" scroll-y="true">
				<u-checkbox-group v-model="checkLabel" iconPlacement="right" placement="column" @change="changeLabel">
					<u-checkbox class="check-item" v-for="(item,index) in labelList" :key="index" :label="item.name"
						:name="item.id"></u-checkbox>
				</u-checkbox-group>
			</scroll-view>
		</u-popup>
		<!-- 开始时间 -->
		<u-datetime-picker :defaultIndex="startDef" :show="showStart" v-model="form.business_times" mode="time" @confirm="confirmStart" @cancel="showStart = false"></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker :defaultIndex="endDef" :show="showEnd" v-model="form.endtime" mode="time" @confirm="confirmEnd" @cancel="showEnd = false"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageList: [],
				form: {
					shop_id: '',
					shop_name: "",
					phone: "",
					shop_address: "",
					business_times: "",
					endtime: "",
					shop_images: "",
					label_ids: "",
				},
				labelList: [],
				show: false,
				checkLabel: [],
				labels: [],
				showStart: false,
				showEnd: false,
				startDef:[3,5],
				endDef:[5,8],
			}
		},
		onLoad(options) {
			this.form.shop_id = options.id
			this.getLabelList()
			this.getShopInfo()
		},
		methods: {
			confirmStart(e){
				this.startDef = []
				let arr = e.value.split(':')
				arr.forEach(item=>{
					this.startDef.push(Number(item))
				})
				this.showStart = false
			},
			confirmEnd(e){
				this.endDef = []
				let arr = e.value.split(':')
				arr.forEach(item=>{
					this.endDef.push(Number(item))
				})
				this.showEnd = false
			},
			// 获取店铺详情
			getShopInfo() {
				uni.$u.http.post('/shop/shopdetails', {
					shop_id: this.form.shop_id
				}).then(res => {
					this.form = {
						shop_id: res.data.id,
						shop_name: res.data.shop_name,
						phone: res.data.phone,
						shop_address: res.data.shop_address,
						business_times: res.data.business_times,
						endtime: res.data.endtime,
						shop_images: res.data.shop_images,
						label_ids: res.data.label_ids,
					}
					this.imageList = res.data.shop_images.split(',')
					let ids = res.data.label_ids.split(',')
					ids.forEach(item => {
						this.checkLabel.push(Number(item))
					})
					this.startDef = []
					let startArr = res.data.business_times.split(':')
					startArr.forEach(item=>{
						this.startDef.push(Number(item))
					})
					this.endDef = []
					let endArr = res.data.endtime.split(':')
					endArr.forEach(item=>{
						this.endDef.push(Number(item))
					})
					this.define()
				})
			},
			// 确定选择标签
			define() {
				this.labels = []
				this.checkLabel.forEach(item => {
					let label = this.labelList.find(el => {
						return el.id == item
					})
					this.labels.push(label.name)
				})
				this.show = false
			},
			// 选择标签
			changeLabel(detail) {
			},
			// 显示弹窗
			showCheckLabel() {
				this.show = true
			},
			// 关闭弹窗
			close() {
				this.show = false
				this.checkLabel = []
			},
			// 获取标签列表
			getLabelList() {
				uni.$u.http.post('/shop/labellist', ).then(res => {
					this.labelList = res.data
				})
			},
			// 删除图片
			delimg(index) {
				this.imageList.splice(index, 1)
			},
			// 选择图片
			checkImg() {
				uni.chooseImage({
					sizeType: 'original',
					success: (imgRes) => {
						imgRes.tempFilePaths.forEach(item => {
							this.uploadImg(item)
						})
					}
				})
			},
			// 上传图片
			uploadImg(item) {
				uni.$u.http.upload('/common/upload', {
					params: {},
					/* 会加在url上 */
					filePath: item, // 要上传文件资源的路径。
					name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
				}).then(res => {
					// 返回的res.data 已经进行JSON.parse
					this.imageList.push(res.data.url)
				})
			},
			// 修改店铺
			editshop() {
				if (!this.form.shop_name) {
					this.$u.toast('请输入店铺名称')
					return
				}
				if (!uni.$u.test.mobile(this.form.phone)) {
					this.$u.toast('请输入正确的手机号')
					return
				}
				if (!this.form.shop_address) {
					this.$u.toast('请输入店铺地址')
					return
				}
				if (!this.form.business_times) {
					this.$u.toast('请选择营业开始时间')
					return
				}
				if (!this.form.endtime) {
					this.$u.toast('请选择营业结束时间')
					return
				}
				this.form.label_ids = this.checkLabel.toString()
				this.form.shop_images = this.imageList.toString()
				uni.$u.http.post('/shop/editshop', this.form).then(res => {
					this.$u.toast('编辑成功')
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		min-height: 100vh;
		background: #F4F4F4;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.shop-bg {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
	}

	.title {
		width: 750rpx;
		height: 262rpx;
		font-size: 48rpx;
		color: #FFFFFF;
		line-height: 262rpx;
		text-align: center;
		z-index: 15;
		position: relative;
	}

	.form {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		margin-top: -20rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;

		.form-item {
			width: 686rpx;
			margin-top: 38rpx;
			padding-bottom: 18rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #E6E6E6;

			.label {
				width: 120rpx;
				margin-right: 30rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #323232;
			}

			.tabs {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				width: 520rpx;

				.tab {
					height: 36rpx;
					border: 1px solid #E6E6E6;
					padding: 0rpx 12rpx;
					margin-right: 16rpx;
					margin-bottom: 12rpx;
					font-size: 24rpx;
					color: #323232;
					line-height: 36rpx;
				}

				.tab-add {
					width: 218rpx;
					height: 36rpx;
					border: 2rpx solid #466AFF;
					font-size: 24rpx;
					color: #466AFF;
					text-align: center;
					line-height: 36rpx;
					margin-bottom: 12rpx;
				}
			}
		}
	}

	.form-item-title {
		margin-top: 42rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #323232;
		width: 686rpx;
	}

	.img-list {
		margin-top: 34rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 686rpx;

		.img-add {
			margin-bottom: 16rpx;
			width: 120rpx;
			height: 120rpx;
			background: #ECECEC;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			font-size: 20rpx;
			color: #FFFFFF;
		}

		.img-item {
			margin-bottom: 16rpx;
			margin-right: 16rpx;
			width: 120rpx;
			height: 120rpx;
			position: relative;

			.img-box {
				border-radius: 16rpx;
				overflow: hidden;
			}

			.del-btn {
				position: absolute;
				right: -14rpx;
				top: -14rpx;
			}
		}
	}

	.submit-btn {
		width: 706rpx;
		height: 102rpx;
		background: linear-gradient(90deg, #FAD6AC 0%, #F3BA7E 100%);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(220, 168, 109, 0.45);
		border-radius: 51rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 102rpx;
		text-align: center;
		margin-top: 98rpx;
		margin-bottom: 65rpx;
	}

	.modal-header {
		width: 710rpx;
		height: 84rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 20rpx;

		.modal-cancel {
			color: #aaa;
		}

		.modal-submit {
			color: #466AFF;
		}
	}

	.modal-box {
		width: 750rpx;
		max-height: 600rpx;
		height: 600rpx;
	}

	.modal-box /deep/.u-checkbox {
		height: 84rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #ECECEC;
		padding: 0px 12px;
	}
</style>
